<template>
  <div class="comment-list">
    <ul v-if="commentData.length">
      <li v-for="(comment,index) in commentData" :key="comment._id" ref="list">
        <div class="comment-show">
          <div class="cover">
            <img :src="comment.sendUserCoverUrl | squareUrls" alt />
          </div>
          <span class="userName">{{comment.sendUserName}}</span>
          <span>评论时间：{{comment.created | setDate}}</span>
          <div class="btn">
            <el-badge :value="comment.stars" class="badge">
              <el-button size="mini" @click="commentStar(comment.rzCommentId)">赞</el-button>
            </el-badge>
            <el-button class="return-comment" size="mini" @click="showReturnArea(index)">回复</el-button>
          </div>
        </div>
        <div class="comment-body">{{comment.resourceCommentData}}</div>
        <div class="comment-wrapper" v-if="index === flog1 && flogBox1">
          <first-comment-box
            :userInfoData="userInfoData"
            :userName="userName"
            @_sendReturnCommentData="_sendReturnCommentData"
            class="firstCommentBox"
          ></first-comment-box>
        </div>
        <div class="comment-child">
          <ul>
            <li v-for="(returns,index2) in comment.child" :key="returns._id" class="list2">
              <div class="return-user">
                <p>
                  {{returns.returnUserName}} 回复：
                  <strong>{{returns.userUserName}}</strong> 的
                  <i>{{returns.resourceCommentData}}</i>
                </p>
                <div class="return-text">
                  <p>{{returns.returnText}}</p>
                </div>
              </div>
              <div class="return-right">
                <p>{{returns.updated | setDate}}</p>
                <el-button size="mini" @click="showReturnArea2(index,index2)">回复</el-button>
              </div>
              <div v-if="index2 === flog2 && index === flog1 && flogBox2" class="second-wrapper">
                <first-comment-box
                  :userInfoData="userInfoData"
                  :userName="userName"
                  @_sendReturnCommentData="_sendReturnCommentData2"
                  class="firstCommentBox2"
                ></first-comment-box>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import firstCommentBox from "@/components/comment/firstCommentBox.vue";
import { mapActions, mapState } from "Vuex";
export default {
  name: "comment-list",
  components: {
    "first-comment-box": firstCommentBox
  },
  props: {
    label: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      id: "",
      commentData: "",
      flog1: -1,
      flog2: -1,
      flogBox1: false,
      flogBox2: false
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    this.initMethods();
  },
  computed: {
    ...mapState("user", ["userInfoData", "userName"])
  },

  methods: {
    _sendMessageToUser(skillCommentData, data) {
      if (this.userName) {
        let collections = {
          text: skillCommentData,
          sendUserName: this.userInfoData.userName || this.userName,
          userName: data,
          sendCoverUrl: this.userInfoData.coverUrl || "",
          system: true,
          id: this.id,
          label: this.label,
          type: this.$route.path.split("/")[1]
        };
        this.sendMessageToUser(collections)
          .then(res => {
            console.log("ok");
          })
          .catch(err => {
            console.log("错误信息：" + err);
          });
      } else {
        alert("你还未登录，无法给作者留言！");
      }
    },
    showReturnArea2(index, index2) {
      this.flog1 = index;
      this.flog2 = index2;
      this.flogBox1 = false;
      this.flogBox2 = true;
    },
    _sendReturnCommentData2(data) {
      //2级回复
      let returnUserName = this.commentData[this.flog1].child[this.flog2]
        .returnUserName;
      let collections = {
        resourceId: this.id,

        userUserName: returnUserName,
        resourceCommentId: this.commentData[this.flog1].child[this.flog2]
          .resourceCommentId,
        resourceCommentData: this.commentData[this.flog1].child[this.flog2]
          .returnText,
        userCoverUrl: this.commentData[this.flog1].child[this.flog2]
          .returnCoverUrl,

        returnText: data,
        returnUserName: this.userInfoData.userName,
        returnCoverUrl: this.userInfoData.coverUrl || ""
      };

      this.setResourceChildCommentData(collections)
        .then(res => {
          this._sendMessageToUser(data, returnUserName);

          this.$refs.list[this.flog1]
            .getElementsByClassName("list2")
            [this.flog2].getElementsByClassName("firstCommentBox2")[0]
            .getElementsByTagName("textArea")[0].value = "";
          this.initMethods();
          alert(res.data.data);
        })
        .catch(err => {
          alert("错误提示：" + err);
        });
    },
    showReturnArea(index) {
      this.flog1 = index;
      this.flogBox1 = true;
      this.flogBox2 = false;
    },
    _sendReturnCommentData(data) {
      // 一级回复
      let collections = {
        resourceId: this.id,

        userUserName: this.commentData[this.flog1].sendUserName,
        resourceCommentId: this.commentData[this.flog1].resourceCommentId,
        resourceCommentData: this.commentData[this.flog1].resourceCommentData,
        userCoverUrl: this.commentData[this.flog1].sendUserCoverUrl,

        returnText: data,
        returnUserName: this.userInfoData.userName,
        returnCoverUrl: this.userInfoData.coverUrl || ""
      };

      this.setResourceChildCommentData(collections)
        .then(res => {
          this._sendMessageToUser(
            data,
            this.commentData[this.flog1].sendUserName
          );
          this.$refs.list[this.flog1]
            .getElementsByClassName("firstCommentBox")[0]
            .getElementsByTagName("textArea")[0].value = "";
          this.initMethods();
          alert(res.data.data);
        })
        .catch(err => {
          alert("错误提示：" + err);
        });
    },
    initMethods() {
      this.getResourceAllCommentData({ id: this.id })
        .then(res => {
          if (res.data.ok === 1) {
            this.commentData = res.data.data;

            let number = 0;
            res.data.data.forEach(val => {
              val.child.forEach(value => {
                number++;
              });
              number++;
            });
            this.$emit("sendCommentNumber", number);
          } else {
            this.commentData = [];
          }
        })
        .catch(err => {
          console.log("错误提示：" + err);
        });
    },
    ...mapActions("user", [
      "getResourceAllCommentData",
      "setResourceChildCommentData",
      "sendMessageToUser"
    ])
  }
};
</script>

<style lang="sass" scoped>
@import "@/assets/default.sass"
.comment-list
  width: 100%
  margin-top: 10px
  background-color: #fff
  >ul
    width: 100%
    padding: 20px
    >li
      width: 100%
      padding: 20px 10px
      border-bottom: 5px dotted #eee
      overflow: hidden
      .comment-show
        width: 100%
        height: 32px
        position: relative
        @include flex(flex-start,center)
        .cover
          flex: 0 0 32px
          height: 100%
          overflow: hidden
          border-radius: 5px
          @include flex(center,center)
          img
            width: 100%
            height: auto
        span
          margin-left: 20px
        .userName
          color: #000
          font-weight: 700
        .z-index
          position: absolute
          right: 160px
          width: 60px
          height: 100%
          color: #aaa
          @include flex(center,center)
        .btn
          position: absolute 
          right: 0
          @include flex(center,center)
          .badge
            margin-right: 30px
      .comment-body
        margin-top: 5px
        line-height: 20px
        min-height: 40px
        padding: 0 52px
      .comment-child
        >ul
          width: 100%
          padding: 10px
          >li
            border: 1px solid #f0f0f0
            padding: 20px
            overflow: hidden
            margin-bottom: 5px
            flex-wrap: wrap
            @include flex(flex-start,flex-start)       
            .return-user
              flex: 0 0 80%
              overflow: hidden
              >p
                width: 100%
                height: 25px
                overflow: hidden
                text-overflow: ellipsis
                white-space: nowrap
                >i
                  color: #999                  
              >.return-text
                width: 100%
                line-height: 25px
                color: #0487dc
                padding: 0 10px
            .return-right
              flex: 1
              text-align: right
              >p
                height: 25px  
            .second-wrapper            
              flex: 0 0 100%  
</style>